/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, { useRef, useEffect } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Button,
  Animated,
  Image,
  ImageBackground,
  TouchableWithoutFeedback,
  Clipboard
} from 'react-native';

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

import ColorsPage from './components/colors'
import About from './components/about'

import colors from './assets/colors.json'
import pics from './assets/pics.js'

const Drawer = createDrawerNavigator();

const App = function () {
  let color = colors[Math.floor(Math.random() * colors.length)]
  const [mainColor, setMainColor] = React.useState(color);
  const [subColor, setSubColor] = React.useState(color.colors[0]);

  function MainColors({ setColor, isMain, colors }) {
    console.log('SubColors', subColor, 'MainColor', mainColor);
    return colors.map(c => {

      let sel = false;
      if (isMain) {
        if (c.id == mainColor.id) {
          sel = true;
        }
      } else {
        if (c.hex == subColor.hex) {
          sel = true
        }
      }


      return <TouchableWithoutFeedback key={c.id} onPress={() => {
        console.log('-------this-------', this);
        setColor(c);
        if (isMain) {
          this.subScroll.scrollTo({ x: 0 })
        }
      }}>
        <View style={[sel ? styles.colorItemSel : styles.colorItem, { backgroundColor: c.hex }]}>
          <Text style={[styles.colorItemName, { textShadowColor: '#ffffff', textShadowOffset: { width: 0, height: 0 }, textShadowRadius: 1 }]}>{c.name}</Text>
        </View>
      </TouchableWithoutFeedback>
    }


    )
  }
  function randMain() {
    let color = colors[Math.floor(Math.random() * colors.length)]
    console.log('main color', color)
    setMainColor(color)
    randSub(color.colors[0]);
  }

  function randSub(color) {
    color = color || mainColor.colors[Math.floor(Math.random() * mainColor.colors.length)]
    console.log('sub color', color)
    setSubColor(color)
  }
  function setClipboard(str) {
    Clipboard.setString(str);
  }

  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Colors">
        <Drawer.Screen name="Colors" component={ColorsPage} />
        <Drawer.Screen name="About" component={About} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  colorItem: {
    width: 50,
    height: 50,
    borderRadius: 5,
    borderColor: '#000000',
    borderWidth: 1,
  },
  colorItemSel: {
    width: 50,
    height: 50,
    borderRadius: 8,
    borderColor: '#ffffff',
    borderWidth: 1,

  },
  colorItemName: {
    lineHeight: 50,
    textAlign: 'center'
  },


});

export default App;
